<template>
  <BaseModal title="新增案件" icon="📋" :show="show" @close="$emit('update:show', false)">
    <form @submit.prevent="handleSubmit">
      <!-- Basic Info -->
      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          基本信息
        </h3>

        <div class="form-group">
          <label>案件编号 <span class="tag-auto">自动生成</span></label>
          <div class="input-wrapper">
            <span class="input-icon">🔢</span>
            <input type="text" value="自动生成" readonly class="input-readonly">
          </div>
        </div>

        <div class="form-group">
          <label>案件名称 <span class="required">*</span></label>
          <div class="input-wrapper">
            <span class="input-icon">📝</span>
            <input type="text" v-model="form.caseName" required placeholder="请输入案件名称">
          </div>
        </div>

        <div class="form-group">
          <label>案件类别 <span class="required">*</span></label>
          <div class="input-wrapper">
            <span class="input-icon">📂</span>
            <select v-model="form.caseCategory" required>
              <option value="">请选择案件类别</option>
              <option value="初核">初核</option>
              <option value="留置">留置</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label>立案时间 <span class="required">*</span></label>
          <div class="input-wrapper">
            <span class="input-icon">📅</span>
            <input type="date" v-model="form.createTime" required>
          </div>
        </div>
      </div>

      <!-- Security Settings -->
      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          安全设置
        </h3>
        <div class="form-group">
          <label>案件加密 <span class="tag-optional">可选</span></label>
          <div class="input-wrapper">
            <span class="input-icon">🔑</span>
            <input type="password" v-model="form.casePassword" placeholder="设置访问密码（可选）">
          </div>
          <p class="help-text">💡 设置后需要密码才能打开案件</p>
        </div>
      </div>

      <!-- Description -->
      <div class="form-section">
        <h3 class="section-title">
          <span class="section-indicator"></span>
          案情简介
        </h3>
        <div class="form-group">
          <label>详细描述 <span class="tag-optional">可选</span></label>
          <textarea v-model="form.caseDescription" rows="6" placeholder="请输入案情简介..." maxlength="1000"></textarea>
          <div class="char-count">{{ form.caseDescription.length }}/1000</div>
        </div>
      </div>

      <div class="form-actions">
        <button type="button" class="btn-cancel" @click="$emit('update:show', false)">✖️ 取消</button>
        <button type="submit" class="btn-save" :disabled="loading">
          {{ loading ? '保存中...' : '💾 保存案件' }}
        </button>
      </div>
    </form>
  </BaseModal>
</template>

<script setup>
import { ref } from 'vue'
import BaseModal from './BaseModal.vue'
import { useCaseStore } from '../stores/case'

const props = defineProps({
  show: Boolean
})

const emit = defineEmits(['update:show', 'close', 'success'])
const caseStore = useCaseStore()
const loading = ref(false)

const form = ref({
  caseName: '',
  caseCategory: '',
  createTime: new Date().toISOString().split('T')[0],
  casePassword: '',
  caseDescription: ''
})

const handleSubmit = async () => {
  loading.value = true
  try {
    await caseStore.createCase({
      case_name: form.value.caseName,
      case_status: form.value.caseCategory,
      case_start_time: form.value.createTime,
      password: form.value.casePassword,
      description: form.value.caseDescription
    })
    emit('success')
    emit('update:show', false)
  } catch (error) {
    console.error(error)
    alert('创建失败: ' + error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.form-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section-title {
  margin: 0 0 20px;
  font-size: 16px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-indicator {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.required {
  color: #f56c6c;
}

.tag-auto {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #e1f3d8;
  color: #67c23a;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
}

.tag-optional {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fef0f0;
  color: #f56c6c;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #909399;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
}

textarea {
  padding: 12px;
  resize: vertical;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
  outline: none;
}

.input-readonly {
  background: #f5f7fa;
  color: #909399;
  cursor: not-allowed;
}

.help-text {
  margin: 8px 0 0;
  font-size: 12px;
  color: #909399;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #c0c4cc;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-cancel {
  padding: 10px 24px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.btn-save {
  padding: 10px 24px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>
